<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/nprogress/0.2.0/nprogress.css" rel="stylesheet">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>Document</title>
</head>
<body>
    <h1>完整拦截器</h1>
    <input type="text" name="" id="ipt">
    <button id="btn">提交</button>
    <script>
        const ipt =document.querySelector('#ipt')
        const btn =document.querySelector('#btn')

        const myaxios = axios.create({
            baseURL:'/',
            timeout:10000,
            headers:{}
        })
        // 添加请求拦截器
    myaxios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    //1.获取token 
    const token = 'asdhbdfuaehf.vukadgbybusd.bduak'//之后的token是用户登陆时，随机获取到的一个唯一字符串，这里简单模拟一下
    // config.headers.token =token //2.拿到得到的token值后 给config对象中的headers属性设置token（随着请求一起发送的请求头信息）
   
   //3.让进度条开始
   NProgress.start();
   
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
    myaxios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    //4.让响应进度条结束
    NProgress.done();

    //5.判断响应的数据，只需要成功的数据,通过data中的code进行判断
    if(response.data.code!=10000){//如果不是10000，就返回失败的promise实例,进入catch中处理异常，值为后台数据中msg的内容
        return Promise.reject(response.data.msg)
    }
    //6.如果是10000，就直接返回数据
    return response.data.data

  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  btn.onclick = async function(){
    const iptValue = ipt.value//拿到用户输入的值,
     try{
        const re = await myaxios.get('/user',{
            params:{
                userId:iptValue
            }
        })
        console.log(re)
    }catch(e){
        console.log(e,'错啦')
    }
  }
  </script>
</body>
</html>